<template>
  <div class="about">
    <h1>count: {{count}}</h1>
    <h1>double: {{double}}</h1>
    <h1 @click="double2 = double2 * 2">double2: {{double2}}</h1>

    <button @click="increment">+1</button>
    <button @click="count = count + 2">+2</button>
  </div>
</template>

<script lang="ts">
import {
  ref,
  computed
} from 'vue'
export default {

  setup () {
    console.log('setup', this)

    // 产生一个ref响应式数据
    const count = ref(1)
    console.log(count, count.value)

    // 产生一个计算属性响应式数据   get
    // 计算属性的内部使用的就是ref
    const double = computed(() => {
      console.log('computed')
      return count.value * 2
    })
    console.log(double, double.value)

    // 产生一个计算属性响应式数据   get/set
    const double2 = computed({
      get () { // 监视了count

        return count.value * 2
      },

      set (value) { // 当当前属性值发生了改变时自动调用(是监视当前属性的, 而不是修改当前属性值的)
        count.value = count.value * 2
      }
    })



    const increment = () => {
      // count.value = count.value + 1

      setTimeout(() => {
        count.value = count.value + 1
      }, 1000);
    }

    return {
      count,
      double,
      double2,
      increment
    }
  }
}
</script>